<template>
  <view>
    <view>事件测试</view>
    <view class="event-info">info:{{ eventInfo }}</view>
    <view class="array-event-info">array_event_info:{{ arrayEventInfo }}</view>
    <view class="click-index">index:{{ clickIndex }}</view>
    <view class="reset-info" @click="resetEventInfo">点击重置 eventInfo</view>
    <view style="color: red" v-for="(item, index) in list" :key="index">
      <view class="event-test-1" @click="clickIndex = index"
        >{{ index }}-1. 点击修改 clickIndex</view
      >
      <view class="event-test-2" @click="showEventInfo"
        >{{ index }}-2. 点击修改 eventInfo</view
      >
      <view class="event-test-3" @click="$test.showEventInfo"
        >{{ index }}-3. 点击修改 eventInfo</view
      >
      <view class="event-test-4" @click="showEventInfo($event, item, index)"
        >{{ index }}-4. 点击修改 eventInfo</view
      >
      <view
        class="event-test-5"
        @click.stop="$test.showEventInfo($event, item, index, undefined)"
        >{{ index }}-5. 点击修改 eventInfo</view
      >
      <child-test
        class="event-test-6"
        @click="showEventInfo($event, item, index)"
        >{{ index }}-6. 点击修改 eventInfo</child-test
      >
      <child-test
        class="event-test-7"
        @click="$test.showEventInfo($event, item, index)"
        >{{ index }}-7. 点击修改 eventInfo</child-test
      >
      <view
        class="event-test-8"
        @click="$test.showEventInfo($event, item, item.length)"
        >{{ index }}-8. 点击修改 eventInfo</view
      >
      <view
        class="event-test-9"
        @click="(event) => showEventInfo(event, item, index)"
        >{{ index }}-9. 点击修改 eventInfo</view
      >
      <view
        class="event-test-10"
        @click="function(event) {
            showEventInfo(event, item, index);
          }
        "
        >{{ index }}-10. 点击修改 eventInfo</view
      >
    </view>
    <view>显示测试</view>
    <view style="color: blue" v-for="(item, index) in list" :key="index">
      <view class="view-test-1">{{ index }}:{{ item }}</view>
      <view class="view-test-2">{{ item | getValueFilter }}</view>
      <view class="view-test-3">{{ obj[item] | getValueFilter }}</view>
      <view class="view-test-4">{{ getValue(item) }}</view>
      <view class="view-test-5">{{ getValue(obj[item]) }}</view>
    </view>
    <view style="color: green" v-for="(array1, index) in array" :key="index">
      <view v-for="(item, i) in array1" :key="i">
        <view class="view-test-6">{{ index }}:{{ i }}:{{ item }}</view>
        <view class="view-test-7">{{ getValue(array1) }}</view>
        <view class="view-test-8">{{ getValue(item) }}</view>
        <view class="view-test-9">{{ getValue(obj[item]) }}</view>
      </view>
    </view>
    <view style="color: blue" v-for="(item, index) in list2" :key="index">
      <view class="view-test-10" v-if="Object.values(item.obj).length">{{
        Object.values(item.obj)[0]
      }}</view>
    </view>
    <view>遍历对象</view>
    <view style="color: orange" v-for="(item, key) in obj" :key="key">
      <view class="map-object-1">{{ key }}:{{ item }}</view>
    </view>
    <view style="color: red" v-for="(item, key) in { test1, test2 }" :key="key">
      <view class="map-object-2">{{ key }}:{{ item }}</view>
    </view>
    <view
      style="color: blue"
      v-for="(item, key) in { test1: 'obj:test1', test2: 'obj:test2' }"
      :key="key"
    >
      <view class="map-object-3">{{ key }}:{{ item }}</view>
    </view>
    <view>遍历数值</view>
    <view style="color: red" v-for="(_, index) in 2" :key="index">
      <view class="map-number-1">{{ index }}</view>
    </view>
    <view style="color: orange" v-for="(_, index) in 2" :key="index">
      <view class="map-number-2">{{ getValue(list[index]) }}</view>
    </view>
    <view>遍历复杂表达式</view>
    <view
      style="color: blue"
      v-for="(item, key) in Object.assign({}, obj)"
      :key="key"
    >
      <view class="map-call-1">{{ key }}:{{ item }}</view>
    </view>
    <view>属性值为对象表达式</view>
    <child-test
      v-for="(item, index) in list"
      :key="index"
      style="color: red"
      class="child-test"
      :text="item"
      :value="getValue(obj[item])"
      :obj="{ text: item }"
    ></child-test>
    <view>列表更新</view>
    <child-test
      v-for="(item, index) in list2"
      :key="item.id"
      style="color: blue"
      class="update-test"
      showId
      :text="item.text"
      @update="update($event, index)"
      @click="del(index)"
      >点击删除</child-test
    >
    <view>Array Event测试</view>
    <view class="array-event-test">
      <view
        v-for="(item, index) in [
          {
            x: [0, 1, 2, 3],
          }
        ]"
        :key="index"
      >
        <view
          v-for="(name, i) in item.x"
          :key="i"
          class="array-event-test-item"
          @click="arrayEvent(index, name)"
        >
          {{ index }}+{{ name }}
        </view>
      </view>
    </view>
    <view>input 值保留测试</view>
		<view>
			<input v-for="item in list3" :key="item" placeholder="请输入" />
			<button @click="deleteFirst">删除首项</button>
			<button @click="addFirst">新增首项</button>
		</view>
  </view>
</template>

<script>
import childTest from './child-test'

export default {
  components: {
    childTest
  },
  data() {
    return {
      eventInfo: '',
      arrayEventInfo: '',
      clickIndex: -1,
      list3: [1, 2, 3, 4],
      list: ['test1', 'test2'],
      list2: [
        {
          id: '1',
          text: '',
          obj: { test: 'test' }
        }, {
          id: '2',
          text: '',
          obj: { test: 'test' }
        }
      ],
      array: [['test1', 'test2']],
      obj: {
        test1: 'obj:test1',
        test2: 'obj:test2'
      },
      test1: 'obj:test1',
      test2: 'obj:test2'
    }
  },
  filters: {
    getValueFilter(value) {
      return `value:${value}`
    }
  },
  methods: {
    showEventInfo(event, item, index) {
      this.eventInfo = `${typeof event === 'string' ? event : event.type.replace('tap', 'click')},${item},${index}`
    },
    resetEventInfo() {
      this.eventInfo = ''
    },
    getValue(value) {
      return `value:${value}`
    },
    update(text, index) {
      console.log(text)
      this.list2[index].text = text
    },
    del(index) {
      this.list2.splice(index, 1)
    },
    arrayEvent(index, name) {
      this.arrayEventInfo = `${index}+${name}`
    },
    deleteFirst() {
      this.list3.splice(0, 1);
    },
    addFirst() {
      this.list3.unshift(5);
    }
  },
  mounted() {
    const self = this
    this.__showEventInfo = function (event, item, index) {
      self.showEventInfo(event, item, index)
    }
    uni.$on('showeventinfo', this.__showEventInfo)
  },
  onUnload() {
    uni.$off('showeventinfo', this.__showEventInfo)
  }
}
</script>

<style>
</style>